
<template>
  <div class="comlist-box">
     <ol class="tabs">
        <li v-for="(item,index) in tabBars" :key="index" @click="activeTab(index)" :class="{ active:index==current}">{{item.name}}</li>
     </ol>
     <ul>
        <li>
           <img src="" alt="">
        </li>
     </ul>
  </div>
</template>
<script>
import  debounce from "~/plugins/debounce.js";
export default {
  name:'Comlist',
  data () {
    return {
        tabBars:[{name:"全部评论"},{name:"我的评论消息"}], 
        current:0,       
    }
  },
  mounted(){
    
  },
  methods:{
    activeTab(index){
      this.current = index
      debounce(() => {
        this.$message({
          showClose: true,
          message: '功能开发中...',
          duration:1000,
          type: 'warning'
        });
      }, 300)     
    }
  },
};

</script>

<style scoped lang="scss">
.active{
    color: #186ae4;
    border-bottom:5px solid #186ae4;
    padding-bottom: 8px;
    &:after{
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: transparent #186ae4 transparent transparent;
      transform: rotate(90deg);  
      position: absolute; 
      left: 50%;
      margin-left: -10px;
      margin-top: -10px;

      // -webkit-transform: translateX(-50%);
      // transform: translateX(-50%);
    }
}
.comlist-box{
    min-height: 200px;
    padding-top: 22px;
    border-top: 1px solid #eee;
    .tabs{
      list-style: none;
      font-size: 20px;
      color: #939393;
      zoom: 1;
      li{
        position: relative;
        float: left;
        margin-right: 44px;
        cursor: pointer;
        &::after{
            content: '';
            display: block;
            clear: both;
        }
      }
    }
}

</style>